<!-- eslint-disable vue/multi-word-component-names -->

<template>
  <v-layout>
    <div style="width: 100%;background-color: rgb(239, 239, 239);min-height: 100%;padding: 10px;">
      <div style="padding: 15px;background-color: white;">
        <v-row>
          <v-col cols="6">
            <v-text-field label="姓名" variant="outlined" v-model="data.name" disabled></v-text-field>
          </v-col>
          <v-col cols="6">
            <v-text-field label="学号" variant="outlined" v-model="data.number" disabled></v-text-field>
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="6">
            <v-text-field label="手机号" variant="outlined" v-model="data.telephone" disabled></v-text-field>
          </v-col>

          <v-col cols="6">
            <v-text-field label="专业" variant="outlined" v-model="data.major" disabled></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="6">
            <v-text-field label="预计请假时间" variant="outlined" v-model="data.beginTime"></v-text-field>
          </v-col>
          <v-col cols="6">
            <v-text-field label="预计销假时间" variant="outlined" v-model="data.endTime"></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12">
            <v-textarea label="具体事由" variant="outlined" v-model="data.reason">

            </v-textarea>
          </v-col>
        </v-row>
        <v-row justify="center" align="center">
          <v-col cols="auto">
            <v-btn @click="addAudit()" density="compact" color="light-blue-accent-3" height="37px">提交</v-btn>
          </v-col>
        </v-row>
      </div>
    </div>
  </v-layout>
</template>

<script lang="ts" setup>
import { message, messageConfirm } from '@/utils/message'
import { onMounted } from 'vue';
import { GetUserInfo } from '@/controllers/userController';
import { AddAudit } from '@/controllers/auditController';
import { reactive } from 'vue';
let data = reactive({
  name: '',
  number: '',
  telephone: '',
  major: '',
  beginTime: '',
  endTime: '',
  reason: '',
})
onMounted(() => {
  getUserInfo()
})

async function getUserInfo() {
  try {
    const res = await GetUserInfo()
    data.name = res.basicInfo.name
    data.number = res.number
    data.telephone = res.basicInfo.phone
    data.major = res.major
  }
  catch (error: any) {
    message(error.message, 'error')
  }
}
async function addAudit() {
  if (data.endTime === '' || data.beginTime === '' || data.reason === '') {
    message('请填写完整内容!')
    return
  }
  messageConfirm('确认提交申请吗?').then(
    () => {
      AddAudit(1, data).then(
        () => {
          message('申请成功', 'success')
        }
      ).catch(err => message(err.message, 'error'))
    }
  ).catch(() => { return })
}
</script>